<template>
  <div class="shopcar">
    <CateHea class="user-hea">
      <template #left><i class="iconfont icon-zuojiantou" @click="$router.go(-1)"></i></template>
      <template #center><span>购物车</span></template>
      <template #right><i class="iconfont icon-shixincaidan"></i></template>
    </CateHea>
    <ShopCarBox :car="carList"></ShopCarBox>
    <CarRecommend class="car-recommend"></CarRecommend>
    <van-submit-bar :price="$store.getters.getCountPrice * 100" button-text="提交订单" @submit="onSubmit" v-if="carList.length > 0">
      <van-checkbox @click="handAllChecked" :value="allChecked" checked-color="#F63515">全选</van-checkbox>
    </van-submit-bar>
    <TabBar :index="2"></TabBar>
  </div>
</template>

<script>
import TabBar from '@/components/common/TabBar'
import CateHea from '@/components/common/CateHea'
import ShopCarBox from '@/components/common/ShopCarBox'
import CarRecommend from '@/components/content/shocart/CarRecommend'
import { getRecommend } from '@/http/index.js'
import { mapState } from 'vuex'
export default {
  components: {
    CateHea,
    TabBar,
    ShopCarBox,
    CarRecommend,
  },
  data() {
    return {
      // carList: [],
      recommendList: [],
    }
  },
  created() {
    this.fetchCarList()
    this.fetchRecommend()
  },
  computed: {
    ...mapState(['carList', 'allChecked']),
  },
  methods: {
    fetchCarList() {
      this.$store.dispatch('getCarDataList')
      // getCarList().then((res) => {
      //   this.carList = res.data
      // })
    },
    fetchRecommend() {
      getRecommend().then((res) => {
        this.recommendList = res.data
      })
    },
    handAllChecked() {
      this.$store.dispatch('changeAllChecked')
    },
    onSubmit() {
      if (this.$store.getters.getCountPrice * 100 != 0) {
        console.log('提交订单')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.shopcar {
  height: 100%;
  background-color: #f7f7f7;
}
.user-hea {
  background-color: #f7f7f7;
}
.van-submit-bar {
  margin-bottom: 90px;
}
.car-recommend {
  padding-bottom: 100px;
}
</style>
